<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线巡检安全检测系统</title>
    <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
<h1 style="text-align: center;margin-top: 30px;font-size: 40px">在线巡检安全检测系统</h1>
<div class="materialContainer">

    <div class="box">
        <div class="title">登录</div>
        <p style="color: red" id="ss"></p>
        <div class="input">
            <label for="name">用户名</label>
            <input name="username" id="name" type="text"/>
            <span class="spin"></span>
        </div>
        <div class="input">
            <label for="pass">密码</label>
            <input type="password" name="password" id="pass">
            <span class="spin"></span>
        </div>
        <div class="button login">
            <button type="button" onclick="login()" value="" name="btn_login" id="btn_login">
                <span>登录</span>
                <i class="fa fa-check"></i>
            </button>
        </div>
        <a href="forgotPassword.html" class="pass-forgot">忘记密码？</a>
    </div>


    <div class="overbox">
        <div class="material-button alt-2">
            <span class="shape"></span>

        </div>
        <div class="title">注册
        </div>
        <p style="color: white; font-size: 18px; height: 5px;" id="sss" class="title"></p>
        <div class="input" style="margin-top: 34px;">

            <label for="regname">用户名</label>
            <input name="username" id="regname" type="text"/>
            <span class="spin"></span>
        </div>
        <div class="input">
            <label for="regpass">密码</label>
            <input type="password" name="password" id="regpass">
            <span class="spin"></span>
        </div>
        <div class="input">
            <label for="reregpass">确认密码</label>
            <input type="password" name="regpassword" id="reregpass">
            <span class="spin"></span>
        </div>
        <div class="button">
            <button type="submit" onclick="register()" value="" name="btn_regiest" id="btn_regiest">
                <span> 注册</span>

            </button>

        </div>
    </div>

</div>
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>

<script>
    var flag = 0;


    function login() {
        var flag1 = 0;
        var s1 = document.getElementById("name").value;

        var s2 = document.getElementById("pass").value;


        if (s1 == '')
            document.getElementById('ss').innerHTML = "请输入您的用户名";
        else if (s2 == '')
            document.getElementById('ss').innerHTML = "请输入您的密码";


        $.ajax({

            url: "/api/user/login/",    //请求的url地址
            dataType: "json",   //返回格式为json
            data: {
              username:s1,
              password:s2
            },
            //    async: true, //请求是否异步，默认为异步，这也是ajax重要特性
            method: 'POST',
            crossDomain: true,
            success: function (res) {

                if (res.code == 200) {
                    // 跳转逻辑
                    flag = 1;
                    window.location.href = "ok.html";

                }


                else {

                    document.getElementById('ss').innerHTML = "账号或密码错误";
                }

            },

        });

    }

    function register() {
        var ss1 = document.getElementById("regname").value;


        var ss2 = document.getElementById("regpass").value;
        var ss3 = document.getElementById("reregpass").value;
        if (ss1 == '')
            document.getElementById('sss').innerHTML = "请输入您的用户名";
        else if (ss2 == '')
            document.getElementById('sss').innerHTML = "请输入您的密码";
        else if (ss3 == '')
            document.getElementById('sss').innerHTML = "请输入您的确认密码";
        if (ss2 != ss3)
            document.getElementById('sss').innerHTML = "密码和确认密码不一致";
        $.ajax({
            url: "/api/user/register/",
            data: {
                username: ss1,
                password: ss2
            },
            method: 'POST',
            dataType: "json",
            crossDomain: true,
            success: function (res) {

                if (res.code == 200) {

                    document.getElementById('sss').innerHTML = "注册成功";


                }


                else {

                    document.getElementById('sss').innerHTML = "该账号已被注册";
                }

            },

        })
    }


</script>

</body>
</html>